define('pc/js/mod/home/vue-home-posts', [
    'pc/js/mod/home/vue-home-nav',
    'pc/js/mod/vue-loading',
    'pc/js/mod/vue-empty',
    'components/VuePage/vue-page',
    'utils/helpers',
    'utils/fetchEnhancer',
    'pc/js/components/VueArticleList/vue-article-list'], (VueHomeNav, VueLoading, VueEmpty, VuePage, helpers, fetch, VueList) => {

Vue.prototype.helpers = helpers;

const Posts = {
    props: ['strUid'],
    data: function() {
        return {
            navConf: {
                title: '文章',
                navs: [{link: '/posts', text: '投稿'}]
            },
            totalRecords: 0,
            pageSize: 12,
            list: null,
            isLoading: true,
            isEmpty: false
        };
    },
    components: {
        'vue-home-nav': VueHomeNav,
        'vue-loading': VueLoading,
        'vue-empty': VueEmpty,
        'vue-page': VuePage,
        'vue-list': VueList
    },
    methods: {
        fetchList: function(page) {
            let _self = this;

            fetch('/api/post/list?pagesize=12&page='+ page +'&uid=' + this.strUid).then(function(json){
                if(0 === json.status) {
                    _self.renderList(json.data.data);
                    _self.renderPage(json.data.total, json.data.page_size);
                }
            });
        },
        renderList: function(list) {
            this.isLoading = false;

            if(!list || !list.length) {
                this.isEmpty = true;
                return;
            }

            this.list = list;
        },
        renderPage: function(total, pageSize) {
            this.totalRecords = total;
            this.pageSize = pageSize;
        },
        changePage: function(currentPage) {
            this.fetchList(currentPage);
        }
    },
    mounted: function() {
        this.fetchList(1);
    },
    template:
`<div>
    <vue-home-nav v-bind:conf="navConf"></vue-home-nav>
    <div class="home-content-right">
        <div class="home-content-right-title">TA 的投稿</div>
        <div class="home-content-right-list" style="position: relative;">
            <vue-loading v-if="isLoading"></vue-loading>
            <vue-empty v-if="isEmpty"></vue-empty>

            <div style="padding: 0 10px">
                <vue-list :list="list"></vue-list>
            </div>
        </div>
        <vue-page v-bind:onChange="changePage" v-bind:totalRecords="totalRecords" v-bind:pageSize="pageSize"></vue-page>
    </div>
    <div class="x-clear"></div>
</div>`
};

return Posts;

});
